<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Display of TemplateDoc</title>
<script>
let templateDoc = [
    { para: { type: "Text", content: "hello\ngirl\n", url: "" } },
    { para: { type: "Text", content: "welcome to china!\nthank!\n", url: "" } },
    { para: { type: "Text", content: "New paragraph here.\nContinue here.", url: "" } }
];

let loadedImages = [];  // Array to hold loaded image objects

function preloadImages(callback) {
    let imagesToLoad = templateDoc.filter(item => item.para.type === "Image");
    let imagesLoaded = 0;
    loadedImages = [];  // Clear previously loaded images

    if (imagesToLoad.length === 0) {
        callback();  // No images to load, proceed to rendering
        return;
    }

    imagesToLoad.forEach(item => {
        const img = new Image();
        img.onload = () => {
            loadedImages.push({ img: img, para: item.para });
            imagesLoaded++;
            if (imagesLoaded === imagesToLoad.length) {
                callback();  // All images loaded, proceed to rendering
            }
        };
        img.src = item.para.url;
    });
}

function displayOnCanvas() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 800;  // Set canvas size
    canvas.height = 600;

    let yPosition = 10;

    templateDoc.forEach(item => {
        if (item.para.type === "Text") {
            ctx.font = '16px Arial';
            ctx.fillStyle = 'black';
            let lines = item.para.content.split('\n');
            lines.forEach(line => {
                ctx.fillText(line, 10, yPosition);
                yPosition += 20;
            });
        } else if (item.para.type === "Image") {
            const imageObj = loadedImages.find(loadedImage => loadedImage.para.url === item.para.url);
            if (imageObj) {
                ctx.drawImage(imageObj.img, 10, yPosition);
                yPosition += imageObj.img.height + 20;
            }
        }
    });
}

function addImage() {
    const imageUrl = "../imgs/addindent.png";
    templateDoc.push({
        para: {
            type: "Image",
            content: "这是一张图片",
            url: imageUrl
        }
    });
    preloadImages(displayOnCanvas);  // Preload new images and refresh canvas
}

function addText() {
    const textContent = "This is a test\nThis should be a new paragraph\nAnd this is part of it.";
    templateDoc.push({
        para: {
            type: "Text",
            content: textContent,
            url: ""
        }
    });
    displayOnCanvas();  // Refresh canvas to show new text
}

function modifyItem() {
    const index = templateDoc.findIndex(item => item.para.content.includes("welcome to china!"));
    if (index !== -1) {
        templateDoc[index].para.content = "Updated content with new line";
    }
    preloadImages(displayOnCanvas);  // Re-load images if needed and refresh canvas
}

function deleteItem() {
    const index = templateDoc.findIndex(item => item.para.content.includes("welcome to china!"));
    if (index !== -1) {
        templateDoc.splice(index, 1);
    }
    preloadImages(displayOnCanvas);  // Re-load images if needed and refresh canvas
}

window.onload = function() {
    preloadImages(displayOnCanvas); // Preload any initial images and display
};
</script>
</head>
<body>
<h1>Canvas Display of TemplateDoc</h1>
<canvas id="canvas" style="border:1px solid #000;"></canvas>
<button onclick="addText()">Add Text</button>
<button onclick="addImage()">Add Image</button>
<button onclick="modifyItem()">Modify Item</button>
<button onclick="deleteItem()">Delete Item</button>
</body>
</html>
